<template>
  <div class="test">
    <input
      type="text"
      v-model="firstName"
    />+
    <input
      type="text"
      v-model="lastName"
    />=
    <input
      type="text"
      :value="fullName"
    />
    {{ fullName }}
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
      // fullName: ''
    }
  },
  methods: {
    // 数据不会缓存
    // fullName() {
    //   console.log('fullName')
    //   return this.firstName + '-' + this.lastName
    // }
  },
  watch: {
    // 以函数的形式进行监听实例属性的变化,只要属性发生变化就会自动触发
    // 参数1 新值
    // 参数2 旧值
    // firstName(newVal, oldVal) {
    //   this.fullName = newVal + '-' + this.lastName
    // },
    // lastName(newVal, oldVal) {
    //   this.fullName = this.firstName + '-' + newVal
    // }
  },
  computed: {
    // 直接把函数当做属性使用
    fullName() {
      console.log('computed')
      return this.firstName + '-' + this.lastName
    }
  }
}
</script>
<style lang="scss"></style>
